{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-question-single">
            <div class="r-left">
                <div class="crumbs">
                    {volist name="crumbs" id="vo"}
                    <a href="{$vo.url}">{$vo.title}&nbsp;&nbsp;/&nbsp;&nbsp;</a>
                    {/volist}
                    帖子详情
                </div>
                <div class="single">
                    <div class="title">{$single.title}</div>
                    <div class="info">
                        <div class="cover">
                            <img src="{$single.user.cover}">
                        </div>
                        <div class="warp">
                            <div>
                                <el-popover
                                    placement="top"
                                    width="300"
                                    trigger="hover">
                                    <div class="el-blog-crad el-blog-popover">
                                        <a class="header" href="{$single.user.url}" target="_blank">
                                            <img class="cover" src="{$single.user.cover}">
                                            <span class="nickname">{$single.user.nickname}</span>
                                            <img class="icon" src="{$single.user.group.icon}" title="{$single.user.group.title}">
                                        </a>
                                        <div class="content">{$single.user.describe}</div>
                                    </div>
                                    <a slot="reference" href="{$single.user.url}" class="nickname" target="_blank">{$single.user.nickname}</a>
                                </el-popover>
                                <img src="{$single.user.group.icon}" title="{$single.user.group.title}" style="width: 20px;vertical-align: middle;">
                            </div>
                            <div class="bottom">
                                <div class="time">{$single.create_time}</div>
                                <div class="vertical"></div>
                                <div class="view"><i class="el-icon-view"></i>{$single.clicks}</div>
                                <div class="vertical"></div>
                                <div class="view" style="cursor: pointer;" @click="collectClick()">
                                    <i :class="single.is_collect ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                                    {{single.collect_count}}
                                </div>
                                <div class="vertical"></div>
                                <template v-if="userInfo.id == single.user.id">
                                    <a class="edit" href="{:index_url('blog/user/blogUpdate', ['id' => $single.id])}"><i class="el-icon-edit"></i>编辑</a>
                                    <div class="vertical"></div>
                                    <el-tag v-if="single.status == 0" type="warning" size="mini">审核中</el-tag>
                                    <el-tag v-if="single.status == 1" type="success" size="mini">审核通过</el-tag>
                                    <el-tag v-if="single.status == 2" type="danger" size="mini">审核未通过</el-tag>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="content">{$single.content|raw}</div>
                    <div class="el-next-prev">
                        <div class="item prev">
                            上一页：{empty name="single.prev"}没有了{else/}<a href="{$single.prev.url}">{$single.prev.title}</a>{/empty}
                        </div>
                        <div class="item next">
                            下一页：{empty name="single.next"}没有了{else/}<a href="{$single.next.url}">{$single.next.title}</a>{/empty}
                        </div>
                    </div>  
                </div>
                <div class="el-publish-main">
                    <el-input
                        class="el-publish-textarea"
                        type="textarea"
                        :rows="5"
                        placeholder="文明上网，理想发言~"
                        v-model="comment_content">
                    </el-input>
                    <div class="el-publish-button">
                        <el-button 
                            size="small" 
                            :type="comment_content === '' ? 'info' : 'primary'" 
                            :loading="pushLoading"
                            @click="comment(commentData, 0)">
                            回帖
                        </el-button>
                    </div>
                </div>
                <div class="el-comment-title">全部回帖（{{commentCount}}）</div>
                <div class="el-comment-list">
                    <div class="item" v-for="(item, index1) in commentData">
                        <div class="left">
                            <div class="avatar">
                                <el-image :src="item.user.cover"></el-image>
                            </div>
                        </div>
                        <div class="right">
                            <div>
                                <a :href="item.user.url" target="_blank" class="nickname">{{item.user.nickname}}</a>
                                <img :src="item.user.group.icon" :title="item.user.group.title" style="width: 20px;vertical-align: middle;">
                                <span class="vertical"></span>
                                <span class="time">{{item.friend_time}}</span>
                            </div>
                            <div class="content">{{item.content}}</div>
                            <div class="interact">
                                <span class="like" @click="commentLike(item)">
                                    <i class="icon" :class="item.is_like ? 'liked-icon' : 'like-icon'"></i>
                                    <span class="text">{{item.like > 0 ? item.like : '点赞'}}</span>
                                </span>
                                <span class="reply" @click="commentContentShow(item)">
                                    <i class="icon reply-icon"></i>
                                    <span class="text">{{item.comment_content_show ? '取消' : '回复'}}</span>
                                </span>
                                <span class="remove" v-if="item.user.id == userInfo.id" @click="commentRemove(commentData, item, index1)">
                                    <i class="icon el-icon-delete"></i>
                                    <span class="text">删除</span>
                                </span>
                            </div>
                            <div v-if="item.comment_content_show" style="margin-top: 16px">
                                <el-input
                                    v-model="item.comment_content"
                                    class="el-publish-textarea"
                                    type="textarea"
                                    :rows="5"
                                    :placeholder="'回复' + item.user.nickname + '：'">
                                </el-input>
                                <div class="el-publish-button">
                                    <el-button 
                                        size="small" 
                                        :type="item.comment_content === '' ? 'info' : 'primary'" 
                                        :loading="item.comment_push_loading" 
                                        @click="comment(item.reply, item.id, item)">
                                        回帖
                                    </el-button>
                                </div>
                            </div>
                            <div class="item" v-for="(reply, index2) in item.reply">
                                <div class="left">
                                    <div class="avatar">
                                        <el-image :src="reply.user.cover"></el-image>
                                    </div>
                                </div>
                                <div class="right">
                                    <div>
                                        <a :href="reply.user.url" target="_blank" class="nickname">{{reply.user.nickname}}</a>
                                        <template v-if="reply.reply_user != null">
                                            &nbsp;回复&nbsp;
                                            <a :href="reply.reply_user.url" target="_blank">@{{reply.reply_user.nickname}}</a>
                                        </template>
                                        <img :src="reply.user.group.icon" :title="reply.user.group.title" style="width: 20px;vertical-align: middle;">
                                        <span class="vertical"></span>
                                        <span class="time">{{reply.friend_time}}</span>
                                    </div>
                                    <div class="content">{{reply.content}}</div>
                                    <div class="interact">
                                        <span class="like" @click="commentLike(reply)">
                                            <i class="icon" :class="reply.is_like ? 'liked-icon' : 'like-icon'"></i>
                                            <span class="text">{{reply.like > 0 ? reply.like : '点赞'}}</span>
                                        </span>
                                        <span class="reply" @click="commentContentShow(reply)">
                                            <i class="icon reply-icon"></i>
                                            <span class="text">{{reply.comment_content_show ? '取消' : '回复'}}</span>
                                        </span>
                                        <span class="remove"  v-if="reply.user.id == userInfo.id" @click="commentRemove(item.reply, reply, index2)">
                                            <i class="icon el-icon-delete"></i>
                                            <span class="text">删除</span>
                                        </span>
                                    </div>
                                    <div v-if="reply.comment_content_show" style="margin-top: 16px">
                                        <el-input
                                            v-model="reply.comment_content"
                                            class="el-publish-textarea"
                                            type="textarea"
                                            :rows="5"
                                            :placeholder="'回复' + reply.user.nickname + '：'">
                                        </el-input>
                                        <div class="el-publish-button">
                                            <el-button
                                                size="small"
                                                :type="reply.comment_content === '' ? 'info' : 'primary'" 
                                                :loading="reply.comment_push_loading" 
                                                @click="comment(item.reply, item.id, reply, reply)">
                                                回帖
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="reply-loader" v-if="item.reply_count > 2" v-loading="item.reply_loading">
                                <span v-if="item.reply_count > item.reply.length" @click="replyList(item)">
                                    <template v-if="item.reply_page == 1">展开{{item.reply_count}}条全部回复</template>
                                    <template v-else>查看更多</template>
                                    <i class="el-icon-arrow-down"></i>
                                </span>
                                <span v-if="item.reply.length > 2" @click="replyListInit(item)">
                                    收起<i class="el-icon-arrow-up"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="commentNoMore && commentLoading == false" class="el-nomore">没有更多啦~</div>
                <div v-else class="el-loader" @click="commentList()">{{commentLoading ? '加载中...' : '查看更多评论'}}</div>
            </div>
            <div class="r-right">
                <div class="el-blog-crad">
                    <div class="header border">
                        热门帖子
                    </div>
                    <div class="content">
                        {volist name=":blog([], 10, $catalog.id, ['clicks' => 'desc'])" id="item"}
                        <a class="hot-blog hot-blog-{$key+1}" href="{$item.url}">
                            <div class="info info1">{$key+1}&nbsp;&nbsp;{$item.title}</div>
                            <div class="count">
                                <i class="el-icon-view" title="浏览"></i> {$item.clicks}
                            </div>
                        </a>
                        {/volist}
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                single: {:json_encode($single)},
                commentCount: 0,
                commentData: [],
                commentPage: 1,
                commentLoading: false,
                pushLoading: false,
                comment_content: '',
            }
        },
        created() {
            this.commentList();
        },
        computed: {
            commentNoMore() {
                return this.commentCount <= this.commentData.length;
            },
        },
        methods: {
            /**
             * 点击收藏
             */
            collectClick() {
                let self = this;
                let url  = self.single.is_collect ? 'api/blog/userCollect/delete' : 'api/blog/UserCollect/save';
                post(url, {id: self.single.id}, function (res) {
                    if (res.status === 'success') {
                        self.single.is_collect = ! self.single.is_collect;
                        self.single.is_collect ? self.single.collect_count ++ : self.single.collect_count --;
                    }
                })
            },
            /**
             * 评论列表
             */
            commentList() {
                let self = this;
                self.commentLoading = true;
                post('api/blog/blogComment/index', {page: self.commentPage, id: self.single.id, user_id: userInfo.id}, function (res) {
                    if (res.status === 'success') {
                        res.data.forEach(function (item, index1) {
                            item.comment_content      = '';
                            item.comment_content_show = false;
                            item.comment_push_loading = false;
                            item.reply_page           = 1; 
                            item.reply_loading        = false;
                            item.reply.forEach(function (reply, index2) {
                                reply.comment_content      = "";
                                reply.comment_content_show = false;
                                reply.comment_push_loading = false;
                            })
                        })
                        self.commentData  = self.commentData.concat(res.data);
                        self.commentCount = res.count;
                        self.commentPage ++;
                    }
                    self.commentLoading = false;
                })
            },
            /**
             * 回复列表
             */
            replyList(item) {
                let self = this;
                if (item.reply_count > item.reply.length) {
                    item.reply_loading = true;
                    post('api/blog/blogComment/reply', {page: item.reply_page, id: item.id}, function (res) {
                        if (res.status === 'success') {
                            res.data.forEach(function (item, index) {
                                item.comment_content      = "";
                                item.comment_content_show = false;
                            })
                            item.reply       = item.reply_page == 1 ? res.data : item.reply.concat(res.data);
                            item.reply_count = res.count;
                            item.reply_page ++;
                        }
                        item.reply_loading = false;
                    })
                }
            },
            /**
             * 回复列表初始化
             */
            replyListInit(item) {
                item.reply         = [];
                item.reply_page    = 1; 
            },
            /**
             * 评论回复
             */
            commentContentShow(item) {
                let show = !item.comment_content_show;
                this.commentData.forEach(function (item, index1) {
                    item.comment_content_show = false;
                    item.reply.forEach(function (reply, index2) {
                        reply.comment_content_show = false;
                    })
                })
                item.comment_content_show = show;
            },
            /**
             * 评论点赞
             */
            commentLike(item) {
                let self = this;
                let url  = item.is_like ? 'api/blog/UserCommentLike/delete' : 'api/blog/UserCommentLike/save';
                post(url, {id: item.id}, function (res) {
                    if (res.status === 'success') {
                        item.is_like = ! item.is_like;
                        item.is_like ? item.like++ : item.like--;
                    }
                })
            },
            /**
             * 评论删除
             */
            commentRemove(list, item, index) {
                let self = this;
                self.$confirm('确定删除评论', '', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    post('api/blog/userComment/delete', item, function (res) {
                        if (res.status === 'success') {
                            list.splice(index, 1);
                        }
                        self.$notify({message: res.message, type: res.status});
                    })
                }).catch(() => {});
            },
            /**
             * 评论
             */
            comment(list, pid, item = "", reply = "") {
                let self = this;
                let content = item === '' ? self.comment_content : item.comment_content;
                if (item == '') {
                    self.pushLoading = true;
                } else {
                    item.comment_push_loading = true;
                }
                post('api/blog/userComment/save', {id: self.single.id, pid: pid, content: content, reply_user_id: reply === '' ? 0 : reply.user.id}, function (res) {
                    if (item == '') {
                        self.pushLoading = false;
                    } else {
                        item.comment_push_loading = false;
                    }
                    if (res.status === 'success') {
                        let arr = {
                            id: res.id,
                            pid: pid,
                            user: userInfo,
                            reply_user: null,
                            content: content, 
                            like: [], 
                            create_time: '刚刚', 
                            reply: [],
                            comment_content: "",
                            comment_content_show: false,
                        };
                        if (reply !== '') {
                            arr.reply_user = {nickname: reply.user.nickname, id: reply.user.id};
                        }
                        list.unshift(arr);
                        if (item === '') {
                            self.comment_content = "";
                        } else {
                            item.comment_content = "";
                            item.comment_content_show = false;
                        }
                    }
                })
            }
        }
    })
</script>
{include file="common/footer"}